<template>
  <div class="viewDetail">
    <div class="viewDetail-title">任务详情</div>
    <div class="content-view">
      <div class="task-info">
        <div class="title">这是任务的标签</div>
        <div class="send-time">及时发送</div>
        <div class="send-type">已完成</div>
      </div>
      <div class="ohter-info">
        <ul>
          <li>
            <div class='code'>创建时间：</div>
            <div class="content">2024-03-20 10:41:20</div>
          </li>
          <li>
            <div class='code'>群发对象条件：</div>
            <div class="content" style="color: #2d8cf0;cursor: pointer" @click="getConditions" >查看</div>
          </li>
          <li>
            <div class='code'>发布时间：</div>
            <div class="content">2013-12-13</div>
          </li>
          <li>
            <div class='code'>创建人：</div>
            <div class="content">主账号</div>
          </li>
          <li>
            <div class='code'>分组：</div>
            <div class="content">技术组</div>
          </li>
          <li>
            <div class='code'>删除时间：</div>
            <div class="content">朋友圈/评论发后72小时</div>
          </li>
        </ul>
      </div>
      <ul class="tablist">
        <li :class="active==0?`active`:``" @click="getActive(0)">朋友圈内容</li>
        <li :class="active==1?`active`:``" @click="getActive(1)">下发企微号</li>
      </ul>
      <div class="tab-1" v-if="active==0">
        <div class="rote-content">
          <div class="r-content">最近真的好心累</div>
          <div class="r-time">发送时间：2012-12-12</div>
        </div>
        <!--  评论区-->
        <div class="commentSection">
          <div class="comment-title">追加评论</div>
          <ul>
            <li>
              <div class="index">评论1</div>
              <div class="com-content">李总威武</div>
              <div class="time">发朋友圈后10分钟</div>
            </li>
            <li>
              <div class="index">评论2</div>
              <div class="com-content">这个很高大上</div>
              <div class="time">第1条评论发布后20分钟</div>
            </li>
          </ul>

        </div>
      </div>
      <div class="tab-2" v-if="active==1">
        <el-table
          :data="tableDataList"
          ref="companylabelList"
        >
          <el-table-column
            :label="item.label"
            align="center"
            v-for="(item, index) in tableColumns"
            :key="index"
            :prop="item.key"
            :min-width="item.minWidth ? item.minWidth : ``"
            :fixed="item.fixed ? item.fixed : false"
            :show-overflow-tooltip="true"
          >
            <!--用于表格自定义-->
            <template slot-scope="scope">
              <div v-if="item.key=='name'">
                <div class="userInfo">
                  <img src="../../../assets/images/profile.jpg"/>
                  <div class="name">小城红</div>
                  <div class="label">@志新</div>
                </div>
              </div>
              <div class="label-list" v-else-if="item.key=='label'">
                <label>企业：</label>
                <span>未入VIP群</span>
                <span>持续7天未发言</span>
                <span>1000</span>
              </div>

              <div v-else style="text-align: center">{{ scope.row[item.key] }}</div>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <div class="viewDetail-footer">
      <el-button type="primary" plain size="small" v-hasPermi="['lastWeekList:copy']">复制</el-button>
      <el-button type="primary" plain size="small" v-hasPermi="['lastWeekList:addComments']">追加评论</el-button>
      <el-button type="primary" plain size="small" v-hasPermi="['lastWeekList:del']">删除朋友圈</el-button>
      <el-button type="primary" plain size="small" v-hasPermi="['lastWeekList:delTask']">删除任务记录</el-button>
    </div>
    <!--    查看筛选条件-->
    <viewConditions v-if="showViewConditions" :visableIf.sync="showViewConditions"></viewConditions>
  </div>
</template>

<script>
//import {listUser, delUser,} from "@/api/system/user";

import {listUser} from "@/api/system/user";

export default {
  name: "viewDetail",
  components: {
    'viewConditions': () => import('./viewConditions.vue'),//查看筛选条件
  },
  data() {
    return {
      active: 0,//当前选中
      tableHeight: 600,
      showViewConditions: false,
      tableColumns: [
        {key: 'name', label: `员工`, visible: true, minWidth: 150, fixed: true},
        {key: 'label', label: `朋友圈`, visible: true, minWidth: 150, fixed: false},
        {key: 'label', label: `评论1`, visible: true, minWidth: 150, fixed: false},
        {key: 'label', label: `评论2`, visible: true, minWidth: 150, fixed: false},
      ],
      tableDataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id: null,//用户id
        userName1: null,

      },
      total: 8, // 表格的总条数
    };
  },
  created() {
  },
  methods: {
    getActive(index) {
      this.active = index;
    },
    getConditions() {
      this.showViewConditions = true;
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.tableDataList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
  }
};
</script>
<style lang="scss" scoped>
.viewDetail {
  height: 100%;
  position: relative;

  .viewDetail-title {
    height: 50px;
    line-height: 50px;
    padding-left: 16px;
    background: #fff;
    border-bottom: 1px solid #e9e9e9;
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, .85);
  }

  .task-info {
    padding: 0px 20px;
    padding-top: 20px;

    .title {
      margin-bottom: 10px;
      font-size: 20px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: rgba(0, 0, 0, .85);

    }

    .send-time {
      color: #000;
      background: #e6f7ff;
      border-color: #91d5ff;
      display: inline-flex;
      border: 1px solid #e9e9e9;
      border-radius: 4px;
      font-size: 12px;
      padding: 0px 10px;
      height: 30px;
      align-items: center;
      justify-items: center;
    }

    .send-type {
      height: 30px;
      display: inline-flex;
      justify-items: center;
      font-size: 12px;
      padding: 0px 10px;
      background-color: rgb(0, 194, 112);
      color: #fff;
      border-radius: 4px;
      align-items: center;
      margin-left: 10px;
    }
  }

  .ohter-info {
    display: flex;
    padding: 12px 12px 0;
    margin-top: 12px;
    margin-bottom: 20px;
    background: #f3f3f3;
    border-radius: 2px;
    border: 1px solid #e9e9e9;
    margin: 10px 20px;

    ul {
      display: flex;
      flex-wrap: wrap;

      li {
        width: 33.3333333%;
        list-style: none;
        display: flex;
        font-size: 14px;
        margin-bottom: 10px;

        .code {

        }
      }
    }
  }

  .tablist {
    display: flex;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    margin: 0px 20px;
    margin-bottom: 16px;

    li {
      width: 104px;
      height: 36px;
      display: flex;
      align-items: center;
      background: #fafafa;
      border: 1px solid #e9e9e9;
      justify-content: center;
      margin-right: 10px;
      border-radius: 4px 4px 0 0;
      border-bottom: none;
      cursor: pointer;
      position: relative;
      z-index: 1;

      &.active {
        background: #fff;

        &:after {
          content: '';
          position: absolute;
          height: 1px;
          background: #fff;
          bottom: -1px;
          width: 100%;
          left: 0px;
        }
      }
    }
  }

  .rote-content {
    margin: 0px 20px;
    line-height: 20px;
    font-size: 12px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;

    .r-content {
      font-size: 14px;
    }

    .r-time {
      margin-top: 10px;
      color: #888;
    }
  }

  .commentSection {
    margin: 0px 20px;

    .comment-title {
      font-size: 14px;
      color: rgba(0, 0, 0, .85);
      line-height: 22px;

    }

    ul {
      margin-top: 10px;

      li {
        background: #f9f9f9;
        border-radius: 4px;
        padding: 12px;
        margin-bottom: 8px;
        list-style: none;

        .index {
          font-size: 14px;
          font-weight: bold;
          color: rgba(0, 0, 0, .45);
        }

        .com-content {
          font-weight: 400;
          color: rgba(0, 0, 0, .85);
          line-height: 22px;
          font-size: 14px;
          margin: 8px 0;

        }

        .time {
          font-size: 12px;
          color: rgba(0, 0, 0, .45);
        }
      }
    }
  }

  .content-view {
    overflow-y: auto;
    height: calc(100% - 130px);
  }

  .viewDetail-footer {
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #eee;
  }
}
</style>
